import { Avatar } from 'antd-mobile'
import { useSelector } from 'react-redux'
import { UserCircleOutline } from 'antd-mobile-icons'
import styles from '../css/me.module.css'
import { useNavigate } from 'react-router-dom'

function UserInfo() {
  const userInfo = useSelector((store) => store.user.info)
  const nav = useNavigate()

  return (
    <div>
      {userInfo ? (
        <div className={styles.avatarBox}>
          <Avatar
            src={userInfo.avatar}
            style={{ '--border-radius': '50%', '--size': '84px' }}
          />
          <div className={styles.name}>
            {userInfo.nickname || userInfo.username || userInfo.tel}
          </div>
        </div>
      ) : (
        <div
          className={styles.avatarBox}
          onClick={() => nav('/login')}
        >
          <span class="iconfont icon-profile-user"></span>
          <div className={styles.loginOrReg}>登录/注册</div>
        </div>
      )}
    </div>
  )
}

export default UserInfo
